<template>
	<view class="container-out">
		<view
			class="circle"
			 v-for="(item,index) in circleList"
			 :key = "index"
			:style="{'top':item.topCircle+'rpx','left':item.leftCircle+'rpx','background-color': (index%2==0)?colorCircleFirst:colorCircleSecond}"
		></view>
		<view class="container-in">
			<view
				class="content-out"
				v-for="(item,index) in awardList"
				:key = "index"
				:style="{'top':item.topAward+'rpx','left':item.leftAward+'rpx','background-color': (index==indexSelect)?colorAwardSelect:colorAwardDefault}"
			>
				<view class="item-i">
					<image class="award-image" :src="item.data.image"></image>
					<view class="i-text">{{item.data.name}}</view>
				</view>
			</view>
			<view class="start-btn">
				<view class="btn"  @click="startGame" :style="{'background-color':isRunning?'#e7930a':'#ffe400'}">
					<view>开始</view>
					<view class="text">(0/0)</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapGetters,
	mapActions
} from 'vuex'
export default {
	computed: {
		...mapGetters(['userInfo', 'api']),
	},
	data() {
		return {
			circleList: [], //圆点数组
			awardList: [], //奖品数组
			colorCircleFirst: '#FFDF2F', //圆点颜色1
			colorCircleSecond: '#FE4D32', //圆点颜色2
			colorAwardDefault: '#F5F0FC', //奖品默认颜色
			colorAwardSelect: '#ffe400', //奖品选中颜色
			indexSelect: 0, //被选中的奖品index
			isRunning: false, //是否正在抽奖
			list:[],//后台数据
			
			
		};
	},
	mounted() {
		var _this = this;
		//圆点设置
		var leftCircle = 7.5;
		var topCircle = 7.5;
		var circleList = [];
		for (var i = 0; i < 24; i++) {
			if (i == 0) {
				topCircle = 15;
				leftCircle = 15;
			} else if (i < 6) {
				topCircle = 7.5;
				leftCircle = leftCircle + 102.5;
			} else if (i == 6) {
				topCircle = 15;
				leftCircle = 620;
			} else if (i < 12) {
				topCircle = topCircle + 94;
				leftCircle = 620;
			} else if (i == 12) {
				topCircle = 565;
				leftCircle = 620;
			} else if (i < 18) {
				topCircle = 570;
				leftCircle = leftCircle - 102.5;
			} else if (i == 18) {
				topCircle = 565;
				leftCircle = 15;
			} else if (i < 24) {
				topCircle = topCircle - 94;
				leftCircle = 7.5;
			} else {
				return;
			}
			circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
		}
		this.circleList = circleList;
		//圆点闪烁
		setInterval(function() {
			if (_this.colorCircleFirst == '#FFDF2F') {
				_this.colorCircleFirst = '#FE4D32';
				_this.colorCircleSecond = '#FFDF2F';
			} else {
				_this.colorCircleFirst = '#FFDF2F';
				_this.colorCircleSecond = '#FE4D32';
			}
		}, 500);
		//获取奖品
		this.getPrizes()
		//获取抽奖次数
		this.todaySendNum()
	},
	methods: {
		//获取抽奖次数
		todaySendNum(){
			let params={}
			uni.$u.http.get(this.api.api_v1_turntable_todaySendNum, {params:params}).then(res => {
				if(res.code==200&&res.data){
					this.list=res.data
				}
			})
		},
		//获取奖品
		getPrizes(){
			let params={}
			uni.$u.http.get(this.api.api_v1_turntable_prizes, {params:params}).then(res => {
				if(res.code==200&&res.data){
					this.list=res.data
					this.processingData()
				}
			})
		},
		//处理数据
		processingData(){
			//奖品item设置
			var awardList = [];
			//间距,怎么顺眼怎么设置吧.
			var topAward = 25;
			var leftAward = 25;
			for (var j = 0; j < this.list.length; j++) {
				if (j == 0) {
					topAward = 25;
					leftAward = 25;
				} else if (j < 3) {
					topAward = topAward;
					//166.6666是宽.15是间距.下同
					leftAward = leftAward + 166.6666 + 15;
				} else if (j < 5) {
					leftAward = leftAward;
					//150是高,15是间距,下同
					topAward = topAward + 150 + 15;
				} else if (j < 7) {
					leftAward = leftAward - 166.6666 - 15;
					topAward = topAward;
				} else if (j < 8) {
					leftAward = leftAward;
					topAward = topAward - 150 - 15;
				}
				awardList.push({ topAward: topAward, leftAward: leftAward, data: this.list[j] });
			}
			this.awardList = awardList;
			console.log(this.awardList)
		},
		//开始游戏
		startGame: function() {
			if (this.isRunning) return;
			this.isRunning = true;
			var _this = this;
			var indexSelect = 0;
			var i = 0;
			var timer = setInterval(function() {
				indexSelect++;
				//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
				i += 30;
				if (i > 1000) {
					//去除循环
					clearInterval(timer);
					//获奖提示

					uni.showModal({
						title: '恭喜您',
						content: '获得了第' + (_this.indexSelect + 1) + '个优惠券',
						showCancel: false, //去掉取消按钮
						success: function(res) {
							if (res.confirm) {
								_this.isRunning = false;
							}
						}
					});
				}
				indexSelect = indexSelect % 8;
				_this.indexSelect = indexSelect;
			}, 200 + i);
		}
	}
};
</script>

<style scoped lang="scss">
	.item-i{
		width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 12px;
		.award-image {
			height: 130rpx;
			width: 130rpx;
		}
		.i-text{
			color: red;
		}
	}
/**index.wxss**/

.container-out {
	height: 600rpx;
	width: 650rpx;
	background-color: #b136b9;
	margin: 50rpx auto;
	border-radius: 40rpx;
	box-shadow: 0 10px 0 #871a8e;
	position: relative;
}

.container-in {
	width: 580rpx;
	height: 530rpx;
	background-color: #871a8e;
	border-radius: 40rpx;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

/**小圆球
	box-shadow: inset 3px 3px 3px #fff2af;*/

.circle {
	position: absolute;
	display: block;
	border-radius: 50%;
	height: 20rpx;
	width: 20rpx;
}

.content-out {
	position: absolute;
	height: 150rpx;
	width: 166.6666rpx;
	background-color: #f5f0fc;
	border-radius: 15rpx;
	box-shadow: 0 5px 0 #d87fde;
}

/**居中 加粗*/

.start-btn {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;justify-content: center;align-items: center;
	.btn{
		width: 166.6666rpx;height: 150rpx;background-color: #ffe400;
		box-shadow: 0 5px 0 #e7930a;border-radius: 15rpx;
		font-size: 55rpx;font-weight: bolder;color: #f6251e;
		display: flex;justify-content: center;align-items: center;flex-direction: column;
		.text{
			font-size: 14px;
		}
	}
}


</style>
